<template>
  <div id="Footer">
    <van-tabbar route fixed placeholder z-index="999">
       <!-- :class="{active: '/'===this.$route.path}" -->
      <van-tabbar-item icon="ico i-shouye" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="ico i-caiquan" to="/commUnity">彩友圈</van-tabbar-item>
      <van-tabbar-item icon="ico i-baojiang" to="/baoJiangWang">包奖王</van-tabbar-item>
      <van-tabbar-item icon="ico i-bangdan" to="/daShiBang">大师榜</van-tabbar-item>
      <van-tabbar-item icon="ico i-wode" to="/user">我的</van-tabbar-item>
    </van-tabbar>
    <!-- <div  class="iphoneXBottom" v-fitIphoneX="{type:'height'}"></div> -->
  </div>
</template>

<script>
  import Vue from "vue";
  import {Tabbar, TabbarItem} from 'vant';
  Vue.use(Tabbar).use(TabbarItem);

  export default {
    name:'Footer',
    props:[''],
    data () {
      return {
        active: this.$route.name
      };
    },

    components: {},

    watch: {},

    computed: {},

    methods: {},

    beforeMount() {},

    mounted() {},

    created() {
      // console.log(this.$route.path);
    }

  }

</script>
<style lang='scss'>
  #Footer{
    background: #fff;
    width: 100%;
    -webkit-box-shadow: 0 0 5px rgb(51 51 51 / 20%);
    box-shadow: 0 0 5px rgb(51 51 51 / 20%);
    position: relative;
    .van-tabbar__placeholder{
      height: auto !important;
      .van-tabbar--fixed{
        position: relative;
        bottom: inherit;
        left: inherit;
        &:after{
         border-width: 0; 
        }
        .van-tabbar-item__icon{
          margin-bottom: 0;
          .van-icon-ico{
            font-size: 6vw;
          }
        }
        .van-tabbar-item--active{
          .van-icon-ico{
            color: #FE595D;
          }
          .van-tabbar-item__text{
            color: #FE595D;
          }
        }
      }
    }
    // .van-tabbar{
    //   box-shadow: 0 0 5px rgb(51 51 51 / 20%);
    //   height: 60px;
    // }
    // .van-tabbar-item{
    //   font-size: 100% !important;
    // }
    // .van-tabbar-item--active{
    //   .van-tabbar-item__icon{
    //     .van-icon-ico:before{
    //       color: #FE595D;
    //     }
    //   }
    //   .van-tabbar-item__text{
    //     color: #FE595D;
    //   }
    // }
    // .van-tabbar-item__icon{
    //   margin-bottom: 0 !important;
    // }
    // .van-icon{
    //   // margin-top: -.5vw !important;
    //   &:before{
    //     font-size: 7.5vw !important;
    //   }
    // }
    // .iphoneXBottom{
    //   height: auto !important;
    //   background-color: #FFF;
    //   .van-tabbar{
    //     box-shadow: 0 -3px 3px 0 rgb(51 51 51 / 10%);
    //   }
    //   .van-tabbar--fixed{
    //     position: relative;
    //     bottom: inherit;
    //     left: inherit;
    //   }
    // }
    // .van-tabbar-item__text{
    //   font-size: 3.4vw;
    // }
  }
</style>
